<template>
	<view>
		<view class="heard">
			<u-navbar title=" " leftIconColor="#fff" bgColor="rgba(0, 0, 0, 0)" :autoBack="true" :fixed="true"
				:safeAreaInsetTop="true" :placeholder="true">
			</u-navbar>
			<view class="flex align-center">
				<view class="label u-m-l-32 u-p-t-40">驿站入驻</view>
				<view>
					<u-icon name="/static/index/hz-bg.png" size="342rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="u-font-32 text-bold">资料填写</view>
			<u--form labelPosition="left" :model="form" :rules="rules" :errorType="errorType" ref="uForm" label-width="160rpx">
				<u-form-item label="驿站名称" prop="companyName" borderBottom ref="item1">
					<u--input v-model="form.companyName" placeholder="请输入驿站名称" border="none"></u--input>
				</u-form-item>
				<u-form-item label="驿站地址" prop="lianxiAddress" borderBottom ref="item1">
					<u--input v-model="form.lianxiAddress" placeholder="请输入驿站地址" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系人" prop="lianxiUser" borderBottom ref="item1">
					<u--input v-model="form.lianxiUser" placeholder="请输入联系人" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系人电话" prop="lianxiPhone" borderBottom ref="item1">
					<u--input v-model="form.lianxiPhone" placeholder="请输入联系人电话" border="none"></u--input>
				</u-form-item>

				<view class="u-m-t-16 u-m-b-16">
					<text class="u-font-30 " v-model="form.remark">申请说明</text>
				</view>

				<view style="background-color: #eee;border-radius: 16rpx;">
					<u--textarea placeholder="请输入申请说明" style="background-color: rgba(0, 0, 0, 0);"></u--textarea>
				</view>


			</u--form>

			<view class="u-m-t-80 u-m-l-80 u-m-r-80">
				<u-button type="primary" shape="circle" text="提 交" color="#FF5B00"
					@click="submit()"></u-button>
			</view>

			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		addCompanyInfo
	} from "@/common/api/api.js"
	export default {
		data() {
			return {
				errorType:'toast',
				form: {
					companyName: '',
					lianxiUser: '',
					lianxiPhone: '',
					lianxiAddress: '',
					remark: "",
				},
				rules: {
					'companyName': {
						type: 'string',
						required: true,
						message: '请填驿站名称',
						trigger: ['blur', 'change']
					},
					'lianxiAddress': {
						type: 'string',
						required: true,
						message: '请填驿站地址',
						trigger: ['blur', 'change']
					},
					'lianxiPhone': {
						type: 'string',
						required: true,
						message: '请填联系人',
						trigger: ['blur', 'change']
					},
					'lianxiAddress': {
						type: 'string',
						required: true,
						message: '请填联系电话',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.handleAddCompanyInfo();
				})
			},
			// 提交信息
			handleAddCompanyInfo() {
				addCompanyInfo(this.form).then(res => {
					if (res.code == 200) {
						uni.$u.toast('提交成功，敬候佳音');
						this.form.companyName = '';
						this.form.lianxiUser = '';
						this.form.lianxiAddress = '';
						this.form.remark = '';
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #62C2AF 0%, #B9DEDB 76%, #EDF1F4 100%);
	}

	.heard {}

	.card {
		height: 900rpx;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
	}

	.label {
		height: 82rpx;
		font-size: 68rpx;
		font-family: Fontquan-XinYiGuanHeiTi-Regular, Fontquan-XinYiGuanHeiTi;
		color: #FFFFFF;
		line-height: 82rpx;
		letter-spacing: 3rpx;
		text-shadow: 4rpx 4rpx 8rpx rgba(32, 132, 113, 0.5);
	}
</style>